<template>
    <div>
        <Menus>
            <template v-for="(item,index) in TreeMenuList">
                <MenuItem :key="item.title" v-if="!item.children">{{item.title}}</MenuItem>
                <reSubMenu v-else :key="item.title" :data="item">
                    <template #title>
                        <div>
                            菜单4
                        </div>
                    </template>
                    <MenuItem>菜单4-1</MenuItem>
                    <MenuItem>菜单4-2</MenuItem>
                    <SubMenu>
                        <template #title>
                            <div>
                                菜单4-3
                            </div>
                        </template>
                        <MenuItem>菜单4-3-1</MenuItem>
                        <MenuItem>菜单4-3-2</MenuItem>
                    </SubMenu>
                </reSubMenu>
            </template>
        </Menus>
    </div>
</template>
<script>
import Menus from "./Menus.vue";
import MenuItem from "./MenuItem.vue";
import reSubMenu from "./reSubMenu.vue";
export default {
  name: "Home",
  data() {
    return {
      TreeMenuList: [
        {
          title: "菜单1",
          children: [
            {
              title: "菜单1-1",
              children: [
                {
                  title: "菜单1-1-1",
                  children: [
                    {
                      title: "菜单1-1-1-1",
                      children: [
                        { title: "菜单1-1-1-1-1" },
                        {
                          title: "菜单1-1-1-1-2"
                        }
                      ]
                    },
                    { title: "菜单1-2" }
                  ]
                },
                {
                  title: "菜单1-1-2"
                }
              ]
            },
            { title: "菜单1-2" }
          ]
        },
        { title: "菜单2" },

        { title: "菜单3" }
      ]
    };
  },
  components: {
    Menus,
    MenuItem,
    reSubMenu
  }
};
</script>